<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';
import EchartContainer from '@/components/echartContainer.vue';
import * as echarts from 'echarts';

export default defineComponent({
    components: {
        EchartContainer,
    },
    props: {
        dataInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    setup(props) {
        const EchartContainerRef = ref(); //组件实例
        const dataContainer = reactive({
            loading: false,
        });
        const series = ref([
            {
                data: [0],
                type: 'bar',
                stack: 'a',
                name: '风电发电量(MWh)',
                barWidth: 10,
            },
            {
                data: [0],
                type: 'bar',
                stack: 'a',
                name: '光伏发电量(MWh)'
            },
            {
                data: [0],
                type: 'bar',
                stack: 'a',
                name: '光热发电量(MWh)'
            },
            {
                data: [0],
                type: 'bar',
                stack: 'a',
                barWidth: 10,
                name: '电化学储能发电量(MWh)'
            },
            {
                data: [0],
                type: 'line',
                stack: 'b',
                name: '电网发电计划(MWh)'
            },

        ])
        const names = ref([])
        const xData = ref([])
        watch(
            () => props.dataInfo,
            (newDataInfo) => {
                const val = JSON.parse(JSON.stringify(newDataInfo))
                series.value.forEach((v, i) => {
                    if (Array.isArray(val.data[i])) {
                        v.data = val.data[i]
                        v.name = val.name[i]
                        // console.log(val)
                    }
                })
                names.value = val.name
                xData.value = val.xData
                intFunc()
            },
            {
                immediate: true,
                deep: true,
            },
        )
        function intFunc() {
            if (!EchartContainerRef.value) return;

            const stackInfo = {};
            for (let i = 0; i < series.value[0].data.length; ++i) {
                for (let j = 0; j < series.value.length; ++j) {
                    const stackName = series.value[j].stack;
                    if (!stackName) {
                        continue;
                    }
                    if (!stackInfo[stackName]) {
                        stackInfo[stackName] = {
                            stackStart: [],
                            stackEnd: []
                        };
                    }
                    const info = stackInfo[stackName];
                    const data = series.value[j].data[i];
                    if (data && data !== '-') {
                        if (info.stackStart[i] == null) {
                            info.stackStart[i] = j;
                        }
                        info.stackEnd[i] = j;
                    }
                }
            }
            for (let i = 0; i < series.value.length; ++i) {
                const data = series.value[i].data;
                const info = stackInfo[series.value[i].stack];
                for (let j = 0; j < series.value[i].data.length; ++j) {
                    // const isStart = info.stackStart[j] === i;
                    const isEnd = info.stackEnd[j] === i;
                    const topBorder = isEnd ? 0 : 0;
                    const bottomBorder = 0;
                    data[j] = {
                        value: data[j].toFixed(2),
                        itemStyle: {
                            borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
                        },
                        barWidth: 5,
                    };
                }
            }
            console.log(series.value)
            let option = {
                tooltip: {
                    confine:true
                },
                grid: {
                    top: '10%',
                    left: '1%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true,
                },
                legend: {
                    itemGap: 5,
                    data: names.value,
                    textStyle: {
                        color: '#f9f9f9',
                        borderColor: '#fff',
                    },
                },
                xAxis: {
                    type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#f9f9f9',
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#d1e6eb',
                                margin: 15,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    data: xData.value
                },
                yAxis: {
                    type: 'value'
                },
                series: series.value

            };

            /** 初始化图表 */
            EchartContainerRef.value.initData(option);
        }
        onMounted(() => {
            // intFunc()
        });
        return {
            dataContainer,
            EchartContainerRef,
            intFunc,
            xData,
            names
        };
    },
});
</script>

<template>
    <div class="box-cp-container">
        <EchartContainer ref="EchartContainerRef"></EchartContainer>
    </div>
</template>

<style lang="scss" scoped>
.box-cp-container {
    width: 100%;
    height: 90%;
}
</style>
